<template>
    <div>
        {{ state }} <br>
        <button @click="myStop">停止侦听器</button>
    </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
const state = reactive({
    count: 5, msg: 'abc', age: 20,
    obj: {
        name: 'jack',
        sex: 'man'
    }
});
const count = ref(0)
// watch(() => state.count,(newValue,oldvalue) => {
//     console.log(newValue,oldvalue);
// });
// watch(count, (count, prevCount) => {
//  console.log(count, prevCount);
// })
//侦听多个来源
watch([count, () => state.count], ([countNew, stateNew], [countOld, stateOld]) => {
    console.log([countNew, stateNew], [countOld, stateOld]);
})

const stop =watch(
    () => {
        return state.obj
    },
    (newval, oldval) => {
         // 注意：`newValue` 此处和 `oldValue` 是相等的
         // *除非* state.someObject 被整个替换了
        console.log(newval, oldval);
    },
    {deep:true,immediate: true,flush: 'post'}
)
function myStop(params) {
    stop()
}
//停止侦听器：

// setTimeout(() => {
//     state.count=55
//     count.value=888
// }, 1000);
</script>

<style  scoped></style>